<!DOCTYPE html>
<html>
<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0 pay_set" id="list" lay-title="公众号自定义菜单">
</div>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--当用户安装过chrome的插件，即让电脑里面的IE使用Webkit引擎及V8引擎进行排版及运算，
    没有安装，则会让IE以最高的文档模式IE=Edge展现效果-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <link rel="stylesheet" href="../../../assets/css/function.css?1026"/>
</head>
<body>
<div class="wx-page" id="mune_app">
    <h3>自定义菜单</h3>
    <div class="nav_co custom" >
        <div class="msg">
            <p style="float: left;margin-right: 10px"><img src="http://static.yuntongauto.com/web/manage/images/look.png" alt="" style="margin-top:5px;"/></p>
            <p class='left'><br/>请确认菜单编辑完成后点击“保存”，点击“发布”同步到手机。</p>
        </div>
        <!--手机显示的菜单栏-->
        <div class="left phone_box">
            <div class="box1">
                <img src="../../../assets/images/phone.png" alt=""/>
                <div class="bto">
                    <div class="btn_menu" style='border-left:1px solid #c6c6c6'>
                        <span v-if="menuData.length>0" @click="showAdd(1)" class="zicaidan">{{menuData[0].menu_name}}</span>
                        <span v-else @click="addMenu"><i></i></span>
                        <b v-if="menuData.length>0" @click="deleteItem(0)">&times;</b>
                        <div v-if="show1">
                            <a href="javascript:void(0)" class="btn_top" v-if="menuData[0]&&menuData[0]._menu_list&&menuData[0]._menu_list.length>0"
                               :style="{top:-((menuData[0]._menu_list.length+1)*50+12)+'px'}">
                                <div v-for="(item,i) in menuData[0]._menu_list" @click="edit(item,i,0)" :key="i" class="zicaidan">{{item.menu_name}}</div>
                                <div class="addzi" @click="addItem(0)"><i></i></div>
                            </a>
                            <a href="javascript:void(0)" class="btn_top" v-else>
                                <div class="addzi" @click="addItem(0)"><i></i></div>
                            </a>
                        </div>
                    </div>
                    <div class="btn_menu btn1">
                        <span v-if="menuData.length>1" @click="showAdd(2)" class="zicaidan">{{menuData[1].menu_name}}</span>
                        <span v-else @click="addMenu"><i></i></span>
                        <b v-if="menuData.length>1" @click="deleteItem(1)">&times;</b>
                        <div v-if="show2">
                        <a href="javascript:void(0)" class="btn_top" v-if="menuData[1]&&menuData[1]._menu_list&&menuData[1]._menu_list.length>0"
                           :style="{top:-((menuData[1]._menu_list.length+1)*50+12)+'px'}">
                            <div v-for="(item,i) in menuData[1]._menu_list" :key="i" class="zicaidan" @click="edit(item,i,1)">{{item.menu_name}}</div>
                            <div class="addzi" @click="addItem(1)"><i></i></div>
                        </a>
                        <a href="javascript:void(0)" class="btn_top" v-else>
                            <div class="addzi" @click="addItem(1)"><i></i></div>
                        </a>
                        </div>
                    </div>
                    <div class="btn_menu wid_92 nober_r btn1"  style="margin-right: -1px">
                        <span v-if="menuData.length>2" @click="showAdd(3)" class="zicaidan">{{menuData[2].menu_name}}</span>
                        <span v-else @click="addMenu"><i></i></span>
                        <b v-if="menuData.length>2" @click="deleteItem(2)">&times;</b>
                        <div v-if="show3">
                            <a href="javascript:void(0)" class="btn_top" v-if="menuData[2]&&menuData[2]._menu_list&&menuData[2]._menu_list.length>0"
                               :style="{top:-((menuData[2]._menu_list.length+1)*50+12)+'px'}">
                                <div v-for="(item,i) in menuData[2]._menu_list" :key="i" class="zicaidan" @click="edit(item,i,2)">{{item.menu_name}}</div>
                                <div class="addzi" @click="addItem(2)"><i></i></div>
                            </a>
                            <a href="javascript:void(0)" class="btn_top" v-else>
                                <div class="addzi" @click="addItem(2)"><i></i></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cont left">
            <div class="pad_120 pad1" >
                <p class="mainTit " style="padding: 10px 0">菜单名称 <span class="delete-item" v-if="currentIdnex>-1" @click="deleteSub">删除当前子菜单</span></p>
                <p class='myp'>
                    <span class="left">菜单名称</span>
                    <span class="left">
                        <input type="text" @input="updateName($event)" v-model="currentItem.menu_name" maxlength="16" style="height: 30px;width: 275px;text-indent:10px;border:1px solid #e7e7eb" placeholder="菜单名称" value="" id="mytitle1"/>
                    </span>
                </p>
                <p class='myp'>
                    <span class="left">&nbsp;</span>
                    <span class="left cor_gay">字数不超过8个汉字或16个字母</span>
                </p>
                <p class='myp'>
                    <span class="left">菜单内容</span>
                    <label for="sendmsg"><span class="left"> <input type="radio" :checked="currentItem.s_type==1" id="sendmsg"  @click="cSelect(1)" name="menu"/>发送消息</span></label>
                    <label for="sendmsg3"><span class="left"> <input type="radio" @click="cSelect(2)" :checked="currentItem.s_type==2" id="sendmsg3" name="menu"/> 跳转网页</span></label>
                    <label for="sendmsg4"><span class="left"> <input type="radio" @click="cSelect(3)" :checked="currentItem.s_type==3" checked id="sendmsg4" name="menu"/> 跳转小程序</span></label>
                </p>
                <div class="sendcont " v-if="currentItem.s_type==1">
                    <div class="nav1">
                        <a href="javascript:void(0)" class="on">
                            <em></em>文字
                        </a>
                    </div>
                    <div class="txt" style="display: block" >
                        <textarea class="myarea" @input="editContent($event)" v-model="currentItem.content"></textarea>
                    </div>
                </div>
                <div class="menu_cont " v-if="currentItem.s_type==2">
                    <p> 订阅用户点击该菜单会跳到以下链接</p>
                    <label for="urlText1" class="frm_label">页面地址</label>
                    <input type="text" class="frm_input urlz" @blur="check($event)" @input="editUrl($event)" v-model="currentItem.url" id="urlText1" placeholder="请输入网址" value="">
                    <p class="urlz-error">不需要填写 http://</p>
                </div>
                <div class="menu_cont " style="display: block" v-if="currentItem.s_type==3">
                    <p> 订阅用户点击该菜单会打开小程序</p>
                </div>
            </div>
            <a href="javascript:void(0)" class="send send2 left" id="save" @click="save">保存</a>
            <a href="javascript:void(0)" class="send send1 left" id="publish" @click="fb">发布</a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="myalert">
        请输入
        <a class="close">确定</a>
    </div>
</div>

</body>

<script src="../../../assets/js/jquery.min.js"></script>

<script>
    let mune_app = new Vue({
        el: '#mune_app',
        data: {
            menuData: [],
            show1:false,
            show2:false,
            show3:false,
            currentItem:{
                content: '',
                id: 6,
                key: null,
                menu_name: "",
                pid: 0,
                s_type: 1,
                sort: 0,
                type: null,
                url: '',
            },
            currentIdnex:-1,
            currentNum:-1,
        },
        mounted(){

            this.getData();
        },
        methods:{
            getData(){
                let that=this;
                layui.admin.ajax('Wechat/menu_list',{},1).then(function(res){
                    console.log(res)
                    that.menuData=res.data;
                });//.catch(function(err){});

            },
            deleteItem(n){
                let that=this;
                layer.confirm('您将删除些菜单及菜单内所有子菜单', {
                    btn: ['删除','取消'] //按钮
                }, function(){
                    that.menuData.splice(n,1);
                    layer.msg('删除成功', {icon: 1});
                }, function(){

                });
            },
            deleteSub(){
                this.menuData[this.currentNum]._menu_list.splice(this.currentIdnex,1);
                this.currentItem=this.menuData[this.currentNum];
                this.currentIdnex=-1;
            },
            addMenu(){
                let obj={
                    menu_name:'新增主菜单',
                    s_type:1,
                    content: '',
                    url: '',
                };
                this.menuData.push(obj);
                this.currentItem=this.menuData[this.menuData.length-1];
                this.currentIdnex=-1;
                this.currentNum=this.menuData.length-1;
                mune_app.$forceUpdate();
                console.log(this.menuData);
            },
            addItem(n){
                let obj={
                    menu_name:'新增子菜单',
                    s_type:1,
                    content: '',
                    url: '',
                };
                if(this.menuData[n]._menu_list&&this.menuData[n]._menu_list.length>0){
                    this.menuData[n]._menu_list.push(obj);
                    this.menuData[n].s_type=0;
                }else{
                    this.menuData[n]._menu_list=[];
                    this.menuData[n]._menu_list.push(obj);
                    this.menuData[n].s_type=0;
                }
                mune_app.$forceUpdate();
            },
            updateItem(){

            },
            showAdd(n){
                if(n==1){
                    this.show1=true;
                    this.show2=false;
                    this.show3=false;
                    this.currentItem=this.menuData[0];
                    this.currentIdnex=-1;
                    this.currentNum=0;
                }else if(n==2){
                    this.show1=false;
                    this.show2=true;
                    this.show3=false;
                    this.currentItem=this.menuData[1];
                    this.currentIdnex=-1;
                    this.currentNum=1;
                }else{
                    this.show1=false;
                    this.show2=false;
                    this.show3=true;
                    this.currentItem=this.menuData[2];
                    this.currentIdnex=-1;
                    this.currentNum=2;
                }
            },
            edit(item,i,n){
                this.currentItem=item;
                this.currentIdnex=i;
                this.currentNum=n;
                mune_app.$forceUpdate();
            },
            updateName(e){
                if(this.currentIdnex>-1){
                    this.menuData[this.currentNum]._menu_list[this.currentIdnex].menu_name=e.currentTarget.value;
                }else{
                    this.menuData[this.currentNum].menu_name=e.currentTarget.value
                }

            },
            cSelect(n){
                if(this.currentIdnex>-1){
                    this.menuData[this.currentNum]._menu_list[this.currentIdnex].s_type=n;
                }else{
                    this.menuData[this.currentNum].s_type=n;
                }
            },
            editContent(e){
                if(this.currentIdnex>-1){
                    this.menuData[this.currentNum]._menu_list[this.currentIdnex].content=e.currentTarget.value;
                }else{
                    this.menuData[this.currentNum].content=e.currentTarget.value;
                }
            },
            check(e){
                var str = /[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/
                if (!str.test(e.currentTarget.value)) {
                    layer.msg('网址有误');
                }
            },
            editUrl(e){
                if(this.currentIdnex>-1){
                    this.menuData[this.currentNum]._menu_list[this.currentIdnex].url=e.currentTarget.value;
                }else{
                    this.menuData[this.currentNum].url=e.currentTarget.value;
                }
            },
            save(){
                layui.admin.ajax('Wechat/menu_update',{data:JSON.stringify(this.menuData)}).then(function(res){
                    console.log(res)
                    if(res.code==1){
                        this.getData();
                    }
                }).catch(function(err){});

            },
            fb(){
                layui.admin.ajax('Wechat/create').then(function(res){
                    if(res.code==1){
                        //layer.msg('发布成功');
                        this.getData();
                    }else{
                        layer.msg(res.message);
                    }

                }).catch(function(err){});
            }
        }
    })


    // /*发送消息和跳转网页的 切换*/
    // $('.myp label').click(function () {
    //     var contBox=$(this).parent().parent().find('.hide_box');
    //     var num = $(this).index() - 1;
    //     contBox.hide();
    //     contBox.eq(num).show();
    // })
    // /*弹框关闭*/
    // $('.myalert').on('click','.close',function () {
    //     $(this).parent().hide();
    // })
    // /*
    // *  图文，文字，语音，图片，视频
    // *  */
    // $('.sendcont a').click(function () {
    //     var index=$(this).parents('.pad_120').index()
    //     $(this).addClass('on').siblings().removeClass('on');
    //     $('.sendcont:eq('+index+') .txt:eq(' + $(this).index() + ')').show().siblings('.txt').hide();
    // });
    // //获取当前点击的元素的top值
    // var mtop;
    //
    // $('.btn_menu').click(function () {
    //     $('.pad1').show();
    //     $('.pad2').hide();
    //     var obj=$(this);
    //     mtop = parseInt(obj.find('.btn_top').css('top'));
    //
    //     if (obj.find('span>i').length) {
    //          obj.find('span').html('菜单名称')
    //     } else {
    //         if(obj.find('span').html()!='菜单名称'){
    //             $('#mytitle1').val(obj.find('span').html())
    //         }
    //     }
    //     //所有的子菜单内容隐藏
    //     $('.btn_top').hide();
    //     if (obj.find('span>i')) {
    //         //add-menu 这个类名 是主菜单上hover 显示删除按钮的开关
    //         obj.addClass('add-menu')
    //     } else {
    //         obj.removeClass('add-menu')
    //     }
    //     obj.addClass('on').siblings().removeClass('on');
    //     //点中的子菜单显示
    //     $('.btn_menu.on .btn_top').show();
    //     obj.find('.btn_top').show()
    // })
    // //删除主菜单
    // $('.btn_menu b').click(function (event) {
    //     if ($('.btn_menu.on .btn_top .zicaidan').length) {
    //         $('.myalert').html('有子菜单，不能删除<a class="close"">确定</a>').show();
    //     } else {
    //         $(this).parent().find('span').html('<i></i>');
    //         $(this).parent().removeClass('add-menu');
    //     }
    //     event.stopPropagation();
    // })
    // //添加子菜单
    // $('.addzi').click(function (event) {
    //
    //     mtop = parseInt($(this).parent().css('top'));
    //     if (mtop < -320) {
    //         $('.myalert').html('最多6个子菜单<a class="close"">确定</a>').show();
    //         return null;
    //     }
    //     mtop -= 50;
    //     $(this).parent().prepend('<div class="zicaidan">子菜单名称 <em class=" arrow"></em></div>');
    //     $(this).parent().css({
    //         'top': mtop
    //     });
    //     event.stopPropagation();
    // })
    //子菜单
    // $('.btn_menu').on('click','.zicaidan',function (event) {
    //
    //     $(this).addClass('on').siblings().removeClass('on');
    //     $(this).parent().siblings().find('.zicaidan').removeClass('on');
    //     event.stopPropagation();
    // })

    //输入网址的校验
    // $('.urlz').blur(function () {
    //     var str = /[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/
    //     if($(this).val()){
    //         console.log($(this).val())
    //         if (!str.test($(this).val())) {
    //             $(this).parent().find(".urlz-error").html("网址输入有误").css('color','red');
    //         } else {
    //             $(this).parent().find(".urlz-error").html("不需要填写 http://").css('color','#5db2ff');
    //         }
    //     }else{
    //         $(this).parent().find(".urlz-error").html("不需要填写 http://").css('color','#5db2ff');
    //     }
    //
    // })
    // //删除子菜单
    // $('.dele').click(function () {
    //     if ($('.btn_menu.on .zicaidan.on').length) {
    //         upItem()
    //     } else {
    //         $('.myalert').html('请选中一个要删除的子菜单<a class="close">确定</a>').show();
    //     }
    // });
    // //样式修改 上移一个距离
    // function upItem(){
    //     $('.btn_menu.on div.zicaidan.on').remove();
    //     mtop = parseInt($('.btn_menu.on .btn_top').css('top'));
    //     mtop += 50;
    //     $('.btn_menu.on a.btn_top').css({'top': mtop})
    // }
    // //点击保存的时候
    // $('.send2').click(function () {
    //     var mainTit=$('#mytitle1'),subTit=$('#mytitle2');
    //     if (isBlock($('.pad1'))) {
    //         if (mainTit.val()) {
    //             $('.btn_menu.on:not(".btn_top")').find('span').html(mainTit.val());
    //             mainTit.val('')
    //         } else {
    //             $('.myalert').html('请填写菜单名称<a class="close">确定</a>').show();
    //         }
    //     }
    //     if (isBlock($('.pad2'))) {
    //         var subMenu=$('.btn_menu.on .zicaidan.on')
    //         if (subTit.val()) {
    //             if (isBlock(subMenu.find('.arrow'))) {
    //                 subMenu.html(subTit.val() + '<em class="arrow" style="display: none"></em>');
    //             } else {
    //                 subMenu.html(subTit.val() + '<em class="arrow" style="display: block"></em>');
    //             }
    //             subTit.val('')
    //         } else {
    //             $('.myalert').html('请填写子菜单名称 <a class="close">确定</a>').show();
    //         }
    //     }
    // })
    // //判断是否展示的 方法
    // function isBlock(obj){
    //     if(obj){
    //         if(obj.css('display') == 'block'){
    //             return true
    //         }else{
    //             return  false
    //         }
    //     }
    //     return  false
    // }
    // /*排序*/
    // $('#up_num').click(function () {
    //     var arrowBtn = $('.zicaidan em.arrow');
    //     arrowBtn.toggle().click(function () {
    //         $(this).parent().parent().prepend($(this).parent());
    //     })
    // })
</script>
</html>